

<template>
  <div class="params_wrap">
    <!-- 面包屑 -->
    <div class="params_top">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>商品分类</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <el-alert
      center
      title="注意:只允许为第三级分类设置参数"
      type="warning"
      show-icon
      :closable="false"
    >
    </el-alert>
    <div class="params_select">
      <span class="demonstration">请选择商品分类</span>
      <el-cascader
        v-model="paramsObj.cateAttr"
        :options="paramsObj.cateDate"
        :props="paramsObj.cateProps"
        @change="getActiveListFn"
      ></el-cascader>
    </div>
    <el-tabs v-model="paramsObj.activeName" @tab-click="getActiveListFn">
      <el-tab-pane label="动态参数" name="many">
        <el-row>
          <el-button @click="paramsObj.addManyDialog = true"
            >设置动态参数</el-button
          >
        </el-row>
        <el-table :data="paramsObj.manyDate" style="width: 100%">
          <el-table-column type="expand">
            <template #default="scope">
              <el-tag
                v-for="(tag, index) in scope.row.attr_vals"
                :key="index"
                closable
                @close="closeTag(scope.row, index)"
              >
                {{ tag }}
              </el-tag>
              <el-input
                v-if="paramsObj.inputVisible"
                :ref="'saveTagInput' + scope.$index"
                v-model="paramsObj.inputValue"
                class="input-new-tag"
                size="mini"
                @keyup.enter="handleInputConfirm(scope.row)"
              >
              </el-input>
              <el-button
                v-else
                class="button-new-tag"
                size="small"
                @click="showInput(scope.$index)"
                >+ New Tag</el-button
              >
            </template>
          </el-table-column>
          <el-table-column
            label="属性名称"
            prop="attr_name"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" align="center">
            <template #default="scope">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                size="mini"
                @click="editShowMany(scope.row)"
              ></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="deleteCategoriesFn(scope.row.attr_id)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="静态参数" name="only">
        <el-row>
          <el-button @click="paramsObj.addManyDialog = true"
            >设置静态参数</el-button
          >
          <el-table :data="paramsObj.onlyDate" style="width: 100%">
            <el-table-column
              align="center"
              label="属性名称"
              prop="attr_name"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  size="mini"
                  @click="editShowMany(scope.row)"
                ></el-button>
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  size="mini"
                  @click="deleteCategoriesFn(scope.row.attr_id)"
                ></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-row>
      </el-tab-pane>
    </el-tabs>
    <!-- 设置参数弹框 -->
    <el-dialog v-model="paramsObj.addManyDialog" title="设置参数" width="40%">
      <el-form
        :model="paramsObj.addManyForm"
        status-icon
        :rules="paramsObj.addManyRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="说明">
          <el-input disabled placeholder="添加多个已逗号分隔"></el-input>
        </el-form-item>
        <template v-if="paramsObj.activeName == 'many'">
          <el-form-item label="参数" prop="attr_name">
            <el-input v-model="paramsObj.addManyForm.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="属性名" prop="attr_vals">
            <el-input v-model="paramsObj.addManyForm.attr_vals"></el-input>
          </el-form-item>
        </template>
        <template v-if="paramsObj.activeName == 'only'">
          <el-form-item label="属性名" prop="attr_name">
            <el-input v-model="paramsObj.addManyForm.attr_name"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramsObj.addManyDialog = false">取消</el-button>
          <el-button type="primary" @click="addAttributesFn">确定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 动态编辑回显 -->
    <el-dialog v-model="paramsObj.editManyDialog" title="设置参数" width="40%">
      <el-form
        :model="paramsObj.editManyForm"
        status-icon
        ref="editForm"
        :rules="paramsObj.editManyRules"
        label-width="120px"
        class="demo-ruleForm"
      >
        <el-form-item label="说明">
          <el-input disabled placeholder="添加多个已逗号分隔"></el-input>
        </el-form-item>
        <template v-if="paramsObj.activeName == 'many'">
          <el-form-item label="参数" prop="attr_name">
            <el-input v-model="paramsObj.editManyForm.attr_name"></el-input>
          </el-form-item>
          <el-form-item label="属性名" prop="attr_vals">
            <el-input v-model="paramsObj.editManyForm.attr_vals"></el-input>
          </el-form-item>
        </template>
        <template v-if="paramsObj.activeName == 'only'">
          <el-form-item label="属性名" prop="attr_name">
            <el-input v-model="paramsObj.editManyForm.attr_name"></el-input>
          </el-form-item>
        </template>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="paramsObj.editManyDialog = false">取消</el-button>
          <el-button type="primary" @click="editSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
import { ref, reactive, onMounted, computed, getCurrentInstance } from "vue";
import {
  getCategories,
  getActiveList,
  addAttributes,
  deleteCategories,
  editSubmitAttrs,
} from "../../http/api";
export default {
  setup() {
    const { ctx } = getCurrentInstance();
    const paramsObj = reactive({
      // 选中的参数id
      cateAttr: [],
      // 数据
      cateDate: [],
      cateProps: {
        expandTrigger: "hover",
        value: "cat_id",
        label: "cat_name",
        children: "children",
      },
      //   参数切换
      activeName: "many",
      //   动态参数列表
      manyDate: [],
      //   静态参数列表
      onlyDate: [],
      //   添加tag
      inputVisible: false,
      inputValue:'',
      //   添加参数
      addManyDialog: false,
      addManyForm: {
        attr_sel: "",
        attr_name: "",
        attr_vals: "",
      },
      addManyRules: {
        attr_name: [
          {
            required: true,
            message: "请输入商品参数",
            trigger: "blur",
          },
        ],
        attr_vals: [
          {
            required: true,
            message: "请输入属性名",
            trigger: "blur",
          },
        ],
      },
      //   动态编辑回显
      editManyDialog: false,
      editManyForm: {
        attr_sel: "",
        attr_name: "",
        attr_vals: "",
      },
      editManyRules: {
        attr_name: [
          {
            required: true,
            message: "请输入商品参数",
            trigger: "blur",
          },
        ],
        attr_vals: [
          {
            required: true,
            message: "请输入属性名",
            trigger: "blur",
          },
        ],
      },
      
    });
    paramsObj.cateId = computed(() => {
      if (paramsObj.cateAttr.length === 3) {
        return paramsObj.cateAttr[2];
      }
      return null;
    });
    const getCategoriesFn = async () => {
      let result = await getCategories({ type: 3 });
      paramsObj.cateDate = result;
    };
    // 初始化级联选择器
    onMounted(() => {
      getCategoriesFn();
    });
    // 获取动态或静态参数列表
    const getActiveListFn = async () => {
      if (paramsObj.cateId) {
        let result = await getActiveList(
          paramsObj.cateId,
          paramsObj.activeName
        );
        if (paramsObj.activeName == "many") {
          result.map((item) => {
            item.attr_vals = item.attr_vals.split(",");
          });
          paramsObj.manyDate = result;
        } else {
          paramsObj.onlyDate = result;
        }
      }
    };

    // 确定添加动态参数
    const addAttributesFn = async () => {
      paramsObj.addManyForm.attr_sel = paramsObj.activeName;
      console.log(paramsObj.addManyForm);
      await addAttributes(paramsObj.cateId, paramsObj.addManyForm);
      await getActiveListFn();
      paramsObj.addManyForm = {};
      paramsObj.addManyDialog = false;
    };
    // 删除参数
    const deleteCategoriesFn = async (attrId) => {
      // console.log(attrId);
      await deleteCategories(paramsObj.cateId, attrId);
      getActiveListFn();
    };
    // 编辑回显
    const editShowMany = (scopeRow) => {
      let { attr_name, attr_sel, attr_vals, attr_id } = scopeRow;
      if (attr_sel == "many") {
        attr_vals = attr_vals.join(",");
      }
      paramsObj.editManyForm = { attr_name, attr_sel, attr_vals, attr_id };
      paramsObj.editManyDialog = true;
    };
    // 确定提交编辑
    const editSubmit = async () => {
      ctx.$refs.editForm.validate(async (val) => {
        if (val) {
          let form = { ...paramsObj.editManyForm };
          if (form.activeName == "many") {
            form.attr_vals.split(",");
          }
          await editSubmitAttrs(paramsObj.cateId, paramsObj.editManyForm);
          await getActiveListFn();
          paramsObj.editManyDialog = false;
        }
      });
    };
    // 关闭tag
    const closeTag = async (scopeRow, index) => {
      console.log(scopeRow, index);
      scopeRow.attr_vals.splice(index, 1);
      let form = { ...scopeRow };
      form.attr_vals = form.attr_vals.join(",");
      console.log(form);
      await editSubmitAttrs(paramsObj.cateId, form);
      getActiveListFn();
    };
    // 添加tag事件
    const handleInputConfirm =async (scopeRow) => {
        console.log(scopeRow);
        scopeRow.attr_vals.push(paramsObj.inputValue)
        let form ={...scopeRow}
        form.attr_vals = form.attr_vals.join(',')
        
        await editSubmitAttrs(paramsObj.cateId, form);
        await getActiveListFn();
        paramsObj.inputVisible=false
        paramsObj.inputValue=''
    };
    const showInput = () => {
        paramsObj.inputVisible=true
    };
    return {
      paramsObj,
      getActiveListFn,
      handleInputConfirm,
      showInput,
      getActiveListFn,
      addAttributesFn,
      deleteCategoriesFn,
      editShowMany,
      editSubmit,
      closeTag,
    };
  },
};
</script>
<style lang="scss" scoped>
.params_wrap {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 15px;
  box-sizing: border-box;
  .params_top {
    margin-bottom: 15px;
  }
  .params_select {
    .demonstration {
      margin-right: 10px;
    }
  }
  ::v-deep .el-tag--light {
    margin: 0 5px;
  }
}
</style>

>>>>>>> ac9a1306de72bbf9d20901f6eb6afcca112b567c
